<!--
 *Author：jxx
 *Contact：283591387@qq.com
 *业务请在@/extension/domain/equipmentmanage/Equipment.jsx或Equipment.vue文件编写
 *新版本支持vue或【表.jsx]文件编写业务,文档见:https://v3.volcore.xyz/docs/view-grid、https://v3.volcore.xyz/docs/web
 -->
<template>
    <div class="equipment-container">
        <!-- 左侧树形结构 -->
        <div class="left-tree">
            <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick" default-expand-all>
            </el-tree>
        </div>
        <!-- 右侧表格内容 -->
        <div class="right-content">
            <view-grid ref="grid" :columns="columns" :detail="detail" :details="details"
                :editFormFields="editFormFields" :editFormOptions="editFormOptions" :searchFormFields="searchFormFields"
                :searchFormOptions="searchFormOptions" :table="table" :extend="extend" :onInit="onInit"
                :onInited="onInited" :searchBefore="searchBefore" :searchAfter="searchAfter" :addBefore="addBefore"
                :updateBefore="updateBefore" :rowClick="rowClick" :modelOpenBefore="modelOpenBefore"
                :modelOpenAfter="modelOpenAfter">
                <template #gridHeader>
                </template>
            </view-grid>
        </div>
    </div>
</template>
<script setup lang="jsx">
import extend from "@/extension/domain/equipmentmanage/Equipment.jsx";
import viewOptions from './Equipment/options.js'
import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
const grid = ref(null);
const { proxy } = getCurrentInstance()
const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())

// 树形数据
const treeData = reactive([
    {
        label: '普通内科',
        children: [
            {
                label: '呼吸内科',
                children: [
                    {
                        label: '一病区',
                        children: [
                            {
                                label: '护理单元一',
                            },
                            {
                                label: '护理单元二',
                            }
                        ],
                        label: '二病区',
                        children: [
                            {
                                label: '护理单元一',
                            },
                            {
                                label: '护理单元二',
                            }
                        ]
                    }
                ]
            },
            {
                label: '消化内科',
                children: [
                    {
                        label: '十一病区',
                        children: [
                            {
                                label: '护理单元一',
                            },
                            {
                                label: '护理单元二',
                            }
                        ],
                        label: '十二病区',
                        children: [
                            {
                                label: '护理单元一',
                            },
                            {
                                label: '护理单元二',
                            }
                        ]
                    },
                    
                ]
            },
            {
                label: '血液内科',
                children: [
                    {
                        label: '五病区',
                    },
                    {
                        label: '六病区',
                    },
                ]
            }
        ]
    }
])

const defaultProps = {
    children: 'children',
    label: 'label'
}

// 树节点点击事件
const handleNodeClick = (data) => {
    // 这里可以根据选中的节点筛选右侧表格数据
    console.log(data);
}

let gridRef;
const onInit = async ($vm) => {
    gridRef = $vm;
}
const onInited = async () => {
}
const searchBefore = async (param) => {
    //界面查询前,可以给param.wheres添加查询参数
    //返回false，则不会执行查询
    return true;
}
const searchAfter = async (rows, result) => {
    return true;
}
const addBefore = async (formData) => {
    //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
    return true;
}
const updateBefore = async (formData) => {
    //编辑保存前formData为对象，包括明细表、删除行的Id
    return true;
}
const rowClick = ({ row, column, event }) => {
    //查询界面点击行事件
    // grid.value.toggleRowSelection(row); //单击行时选中当前行;
}
const modelOpenBefore = async (row) => {//弹出框打开后方法
    return true;//返回false，不会打开弹出框
}
const modelOpenAfter = (row) => {
    //弹出框打开后方法,设置表单默认值,按钮操作等
}
//监听表单输入，做实时计算
//watch(() => editFormFields.字段,(newValue, oldValue) => {	})
//对外暴露数据
defineExpose({})
</script>
<style lang="less" scoped>
.equipment-container {
    display: flex;
    height: 100%;

    .left-tree {
        width: 300px;
        padding: 10px;
        border-right: 1px solid #dcdfe6;
        background-color: #fff;
        overflow-y: auto;
    }

    .right-content {
        flex: 1;
        padding: 10px;
        overflow: auto;
    }
}
</style>
